<form id="contactForm" (ngSubmit)="onSubmit()"
      novalidate="novalidate" [saBootstrapValidator]="validatorOptions" class="form-horizontal">

  <fieldset>
    <legend>Showing messages in custom area</legend>
    <div class="form-group">
      <label class="col-md-3 control-label">Full name</label>
      <div class="col-md-6">
        <input type="text" class="form-control" name="fullName"/>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="form-group">
      <label class="col-md-3 control-label">Email</label>
      <div class="col-md-6">
        <input type="text" class="form-control" name="email"/>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="form-group">
      <label class="col-md-3 control-label">Title</label>
      <div class="col-md-6">
        <input type="text" class="form-control" name="title"/>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="form-group">
      <label class="col-md-3 control-label">Content</label>
      <div class="col-md-6">
        <textarea class="form-control" name="content" rows="5"></textarea>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <!--#messages is where the messages are placed inside -->
    <div class="form-group">
      <div class="col-md-9 col-md-offset-3">
        <div id="messages"></div>
      </div>
    </div>
  </fieldset>

  <div class="form-actions">
    <div class="row">
      <div class="col-md-12">
        <button class="btn btn-default" type="submit">
          <i class="fa fa-eye"></i>
          Validate
        </button>
      </div>
    </div>
  </div>

</form>
